<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="index.css" type="text/css" />
<title>Welcome to Voila</title>
</head>

<body>
	<nav id="nav" style="background-image: url(img2/head-nav.jpg);">
		<div id="navbar">
			<span id="nav-left">
				<div id="head-text-logo">Woola!</div>
			</span>
			<span id="nav-right">
				<div class="head-menu-block">
					<div class="head-menu-title">MENU</div>
					<div class="head-menu-submenu">Sit amet constetur</div>
					<div class="head-menu-submenu">adipisicing elit.</div>
					<div class="head-menu-submenu">Fugit perspiciatis.</div>
				</div>
				<div class="head-menu-block">
						<div class="head-menu-title">ABOUT</div>
						<div class="head-menu-submenu">Adipisicing elit.</div>
						<div class="head-menu-submenu">Fugit pipsam</div>
						<div class="head-menu-submenu">ratione numquam</div>
				</div>
				<div class="head-menu-block">
					<div class="head-menu-title">RESERVATION</div>
					<div class="head-menu-submenu">eligaet delita</div>
					<div class="head-menu-submenu">natare nicolas</div>
					<div class="head-menu-submenu">qeequ ternax</div>
				</div>
				<div class="head-menu-block">
					<div class="head-menu-title" style="color: coral;">CONTACT</div>
					<div class="head-menu-submenu">teltfon</div>
					<div class="head-menu-submenu">eeeimale</div>
					<div class="head-menu-submenu">waibo</div>
				</div>
			</span>
		</div>
		<div id="welcome-block">
			<div id="welcome-text">
				<div id="welcome-headline" style="font-size: 5rem; text-shadow: 0.1rem 0.1rem 0.1rem #111111;">
					Welcome to Woola!
				</div>
				<div id="welcome-subline">
					Enjoy your meal offered by Gatling Master.
				</div>
			</div>
		</div>
	</nav>

	
	<!-- <div class="normal-block" style="background-color: #EEEEEE;">
		<div id="about-left-block" style="padding: 2rem 0.5rem; padding-left: 5rem;">
			<div id="about-text">
				<div class="para-headline">
					About Woola!
				</div>
				<div class="para-subline" style="padding: 1rem 0.5rem;font-weight: lighter;">
					There is really somethine you need to know about Woola!
				</div>
				<div class="para-subline" style="padding-bottom: 1rem; padding-top: 0rem;padding: 0.5rem;font-weight: lighter;">
					As you see, you will bath in the shine of our unique Gatling Master, who can not only offer you a great meal, but also provide a peformance of Gatling.
				</div>
			</div>
			<div id="about-img1">
				<img src="img2/chef.png">
			</div>
		</div>
		<div id="about-img">
			<img id="about-img2" src="img2/wineglass.png">
		</div>
	</div> -->
	

	<div class="normal-block" style="background-color: #EEEEEE; display: flex; flex-direction: column; align-items: center; padding: 3rem 5rem;">
		<div id="about-up" style="display: flex; flex-direction: row; justify-content: center; align-items: center;">
			<div id="about-up-left" style="display: flex; flex-direction: column; align-items: center; padding: 0rem 3rem;">
				<div class="para-headline">ABOUT Woola!</div>
				<div style="font-weight: lighter; font-size: 1.2rem; line-height: 2rem; padding-top: 1rem;; align-self: flex-start;">Somethine you need to know about Woola!</div>
				<div style="font-weight: lighter; font-size: 1.2rem; line-height: 2rem; padding: 0.5rem 0rem;">Enjoy your dinner alone, no girlfriend.Pick a seat near the window.See the in-loveds walk around.<br/>Feel the loneliness of you.</div>
				<button class="orangebutton" style="align-self: flex-end; margin-right: 3rem; margin-top: 2rem;">LEARN MORE</button>
			</div>
			<div class="about-up-right" style="display: flex; flex-direction: column; padding: 3rem 1rem;">
				<!-- <img src="img2/wineglass.png" style="height: 100%;"> -->
				<img src="img2/chef.png" width="100%">
			</div>
		</div>
		<div id="about-down" style="padding: 3rem 5rem; display: flex; flex-direction: row; justify-content: space-around; width: 100%;">
			<img src="img2/dish1.png" style="padding: 0rem 1rem; width: 15rem; height: 15rem;">
			<img src="img2/dish2.png" style="padding: 0rem 1rem; width: 15rem; height: 15rem;">
			<img src="img2/dish3.png" style="padding: 0rem 1rem; width: 15rem; height: 15rem;">
			<img src="img2/wineglass.png" style="padding: 0rem 1rem; width: 15rem; height: 15rem;">
		</div>
	</div>

	<div class="normal-block" style="display: flex; flex-direction: row; justify-content: center;">
		<div id="dish-img-block" style="padding: 2rem;display: flex; flex-direction: column; width: 38%;">
			<div id="dish-img-up" style="display: flex; flex-direction: row; justify-content: space-between;">
			<!-- <div id="dish-img-up" style="display: flex; flex-direction: row; justify-content: space-around;"> -->
				<!-- <img src="img2/dish1.png" alt="Dish1" style="padding: 1rem;width: 50%;"> -->
				<!-- <img src="img2/dish2.png" alt="Dish2" style="padding: 1rem;width: 50%;"> -->
				<img src="img2/dish1.png" alt="Dish1" style="padding: 1rem; width: 15rem; height: 15rem;">
				<img src="img2/dish2.png" alt="Dish2" style="padding: 1rem; width: 15rem; height: 15rem;">
				<!-- <div style="background-image: url('img2/dish1.png'); padding-top: 100%; background-size: cover;"></div> -->
			</div>
			<div id="dish-img-down" style="padding: 1rem; ">
				<img src="img2/dish4.png" alt="Dish4" width="100%">
				<!-- <div style="background-size: cover; background-image: url("img2/dish4.png");"></div> -->
			</div>
		</div>
		<div id="dish-text-block" style="padding: 3rem 5rem;width: 38%; display: flex; flex-direction: column; align-items: center;">
			<div class="para-headline" style="font-size: 2.5rem;">
				Tasteful French WhiteFlag
			</div>
			<span style="font-weight: lighter; font-size: 1.5rem; line-height: 2.5rem; padding: 2rem 0rem;" >
				Lorem ipsum dolor sit  
				<a href="xxx.html" style="color: coral; text-decoration-line: none;">amet consectetur</a>
				amet consectetur adipisicing elit. Eaque rerum similique iste nulla dolorem eos ut quidem ad fugit consequatur quod sint ullam non 
				<a href="yyy.html" style="color: coral; text-decoration-line: none;">voluptates</a>
				, odit, officia aliquam reprehenderit distinctio?
			</span>
			<div style="display: flex; flex-direction: row; align-self: flex-end; padding: 0rem 2rem;">
				<button class="orangebutton">VIEW MENU</button>
			</div>

		</div>
	</div>

	<div class="normal-block" style="background-color: #EEEEEE;">
		<div class="reser-block">
			<div class="para-headline">
				Make a Reservation
			</div>
			<input class="inputbox" placeholder="Your Name..." style="background-image: url('img2/user-icon.png');">
			<input class="inputbox" placeholder="Date..." style="background-image: url('img2/date-icon.png');">
			<input class="inputbox" placeholder="Time..." style="background-image: url('img2/time-icon.png');">
			<input class="inputbox" placeholder="Commensals..." style="background-image: url('img2/commensal-icon.png');">
			<button class="orangebutton" style="width: 100%; padding: 1rem 1rem; margin-top: 1.5rem; background-color: #333333;">FIND  A  TABLE</button>
		</div>
		<div class="reser-block"">
			<div class="para-headline">
				Van You See
			</div>
			<div class="usee-items" style="display: flex; flex-direction: column; align-items: flex-start;">
			<div class="usee-item">
				<div class="usee-item-avatar" style="background-image: url('img2/act1.png');"></div>
				<div class="usee-item-right" style="font-family: 'Times New Roman', Times, serif;">
					<div class="usee-item-name">Change the Boss of the Gym</div>
					<span class="usee-item-dt">
						<div class="usee-item-date" style="display: flex; flex-direction: row; align-self: flex-start;">
							<div style="width: 1rem; height: 1rem; margin-right: 0.5rem; background-image: url('img2/date-icon.png'); background-size: cover; background-repeat: no-repeat;"></div>
							<div>08/27</div>
						</div>
						<div class="usee-item-time">
							<div style="width: 1rem; height: 1rem; margin-right: 0.5rem; background-image: url('img2/time-icon.png'); background-size: cover; background-repeat: no-repeat;"></div>
							<div>18:23</div>
						</div>
					</span>
					<div class="usee-item-describ">Let's change the boss of the gym and gain the power from last year.</div>
					<div class="usee-item-readmore">READ MORE...</div>
				</div>
			</div>
			<div class="usee-item">
				<div class="usee-item-avatar" style="background-image: url('img2/53f0025f8ccb6d1fd65828ac6fd1fea9.jpg');"></div>
				<div class="usee-item-right" style="font-family: 'Times New Roman', Times, serif;">
					<div class="usee-item-name">Get the Wrong Door</div>
					<span class="usee-item-dt">
						<div class="usee-item-date">
							<div style="width: 1rem; height: 1rem; margin-right: 0.5rem; background-image: url('img2/date-icon.png'); background-size: cover; background-repeat: no-repeat;"></div>
							<div>09/30</div>
						</div>
						<div class="usee-item-time">
								<div style="width: 1rem; height: 1rem; margin-right: 0.5rem; background-image: url('img2/time-icon.png'); background-size: cover; background-repeat: no-repeat;"></div>
							<div>12:35</div>
						</div>
					</span>
					<div class="usee-item-describ">Hey buddy you get the wrong door, the leather club is two blocks down.</div>
					<div class="usee-item-readmore">READ MORE...</div>
				</div>
			</div>
			<div class="usee-item">
				<div class="usee-item-avatar" style="background-image: url('img2/2d99ce16fdae39f39ad83c7c965b24fb.jpg');"></div>
				<div class="usee-item-right" style="font-family: 'Times New Roman', Times, serif;">
					<div class="usee-item-name">Deep Dark Fantasy</div>
					<span class="usee-item-dt">
						<div class="usee-item-date">
							<div style="width: 1rem; height: 1rem; margin-right: 0.5rem; background-image: url('img2/date-icon.png'); background-size: cover; background-repeat: no-repeat;"></div>
							<div>09/30</div>
						</div>
						<div class="usee-item-time">
							<div style="width: 1rem; height: 1rem; margin-right: 0.5rem; background-image: url('img2/time-icon.png'); background-size: cover; background-repeat: no-repeat;"></div>
							<div>12:35</div>
						</div>
					</span>
					<div class="usee-item-describ">I'm hired for people to fulfill their fantasy, the deep dark fantasy.</div>
					<div class="usee-item-readmore">READ MORE...</div>
				</div>
			</div>
			</div>
		</div>
	</div>

	<div class="normal-block" style="display: flex; flex-direction: row; justify-content: center;">
		<div style="display: flex; flex-direction: column;align-items: center; padding: 0rem 3rem;">
			<div class="para-headline">Book a Table</div>
			<div style="text-align: center; font-weight: lighter;line-height: 200%; margin-bottom: 2rem;">Like our restaurant concept? Book a table and<br>taste our dishes on first hand.</div>
			<button class="orangebutton">BOOK A TABLE</button>
		</div>
		<div style="display: flex; flex-direction: column; align-items: center;">
			<div id="vertial-line"></div>
			<div style="padding: 0.5rem 0rem; color: #333333; font-size: 230%; font-weight: lighter;">Or</div>
			<div id="vertial-line"></div>
		</div>
		<div style="display: flex; flex-direction: column;align-items: center; padding: 0rem 3rem;">
			<div class="para-headline">Share with Your Friends</div>
			<div style="text-align: center; font-weight: lighter;line-height: 200%; margin-bottom: 2rem;">Some of your friends may like to visit us if you<br/>recommend us. They'll trust your taste!</div>
			<span style="display: flex; flex-direction: row;">
				<a href="https://www.facebook.com"><img src="img2/fbshare.png" style="margin: 1rem;"></a>
				<a href="https://www.twitter.com"><img src="img2/twshare.png" style="margin: 1rem;"></a>
			</span>
		</div>
	</div>

	<div id="foot-block" style="padding: 3rem 1rem;background-color: #111111; display: flex;flex-direction: row;justify-content: space-around;">
		<div id="head-text-logo">
			Woola!
		</div>
		<div id="foot-menu-navigation" style="color: papayawhip; ">
			<div class="head-menu-title">
				NAVIGATION
			</div>
			<div class="head-menu-submenu">
				MENU
			</div>
			<div class="head-menu-submenu">
				ABOUT
			</div>
			<div class="head-menu-submenu">
				EVENTS
			</div>
			<div class="head-menu-submenu">
				RESERVATION
			</div>
			<div class="head-menu-submenu">
				CONTACT
			</div>
		</div>
		<div id="foot-right-block" style="color: papayawhip; display: flex; flex-direction: column;">
			<div id="foot-visit" style="display: flex; flex-direction: column; align-items: flex-start;">
				<div class="head-menu-title">VISIT US</div>
				<div style="margin-bottom: 0.5rem; font-weight: lighter;">No.123 Noname Rd.</div>
				<div style="margin-bottom: 0.5rem; font-weight: lighter;">Unknown City, Where Province.</div>
				<div style="margin-bottom: 0.5rem; font-weight: lighter;">Visit us in <a href="https://map.google.com" style="color: coral;">Google Maps.</a></div>
			</div>
			<div id="foot-social" style="display: flex; flex-direction: column;">
				<div class="head-menu-title" style="margin-top: 1rem; margin-bottom: 0.5rem;">CONTACT US</div>
				<div id="foot-social-icons" style="display: flex; flex-direction: row; justify-content: space-between;">
					<!-- <div class="foot-social-icon" style="background-image: url('img2/si1.png');"></div> -->
					<div class="foot-social-icon">
						<img src="img2/si1.png" alt="Facebook">
					</div>
					<div class="foot-social-icon">
						<img src="img2/si2.png" alt="Insgram">
					</div>
					<div class="foot-social-icon">
						<img src="img2/si3.png" alt="...">
					</div>
					<div class="foot-social-icon">
						<img src="img2/si4.png" alt="Twitter">
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>
